<script lang="ts" setup>
import { getList, update, add, del } from '@/api/order-api'
import {onMounted, ref} from "vue";
import {type ComponentSize, ElMessage, ElMessageBox} from 'element-plus'
const currentPage = ref(1)
const pageSize = ref(20)
const pageTotal = ref(10000)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  pageSize.value = val
  search()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  if((pageSize.value * (currentPage.value-1)) < pageTotal.value){
    currentPage.value = val
    search()
  }
}
const removeOne = (val) => {
  del(val)
      .then(res=>{
        console.log(res)
        if(res.data.success){
          ElMessage({
            type:"success",
            message:"删除成功"
          })
          search()
        }else{
          ElMessage({
            type:"error",
            message:"删除失败"
          })
        }
      })
}
const search = () => {
  getList(currentPage.value,pageSize.value)
      .then(res=>{
        console.log(res)
        const msg = res.data.message;
        tableData.value = msg.list
        pageTotal.value = msg.total
      })
}
const tableData = ref([])
onMounted(()=>{
  search()
})
const delVisible = ref(false)
const delDia = (val) =>{
  delFlag.value = val
  delVisible.value = true
}
let delFlag = ref(-1)
const removeId = () => {
  if(delFlag.value != -1){
    delVisible.value = false
    removeOne(delFlag.value)
  }
}
</script>

<template>
  <div>
    <el-dialog
        v-model="delVisible"
        title="提示"
        width="500"
    >
      <span>是否删除该条记录？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="delVisible = false">取消</el-button>
          <el-button type="primary" @click="removeId">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%;height: 70vh;min-height: 500px">
      <el-table-column prop="orderId" fixed label="订单编号" width="340" />
      <el-table-column prop="userInfo.mail" label="用户email" width="200" />
      <el-table-column prop="inputTime" label="下单时间" width="220" />
      <el-table-column prop="address" label="送货地址" width="300" />
      <el-table-column  label="香水详情" width="400">
        <template #default="scope">
<!--          {{scope.row.orderPerfumeRefVos}}-->
          <div style="display: flex;flex-wrap: wrap;align-items: center;justify-content: start">
            <view v-for="(item,index) in scope.row.orderPerfumeRefVos" :key="index" style="margin-right: 30px">
              {{item.count}}x<img :src="item.perfumeVo.img" alt="" style="width: 40px">{{item.perfumeVo.name}}
            </view>
          </div>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="delDia(scope.row.orderId)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 40, 60, 80]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style lang="scss" scoped>

</style>